<template>
  <div style="height: 43px; padding: 5px 16px">
    <div style="display: flex;">
      <div>
        <a-form layout="inline">
          <a-form-item
              label="语言"
              style="min-width: 280px; margin-bottom: 0; height: 24px"
          >
            <a-select
                v-model="language"
                :style="{ width: '200px' }"
                placeholder="请选择编程语言"
            >
              <a-option
                  v-for="(option, key) in languageOptions"
                  :key="key"
                  :value="key"
              >{{ option }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div
          style="display: flex; justify-content: right; width: 100%"
      >
        <a-space>
          <a-button type="outline">运行</a-button>
          <a-button
              type="primary"
              status="success"
              @click="submit"
          >提交
          </a-button>
        </a-space>
      </div>
    </div>
  </div>
  <div id="container" ref="editorContainerRef" style="height: calc(100% - 43px)"></div>
</template>

<script lang="ts" setup>
import * as monaco from "monaco-editor";
import {onMounted, ref, defineProps, watch, defineEmits} from "vue";
import {ProblemControllerService} from "../../apis";
import {Message} from "@arco-design/web-vue";

const props = defineProps({
  value: String,
  handleChange: {
    type: Function,
    default: () => {
      console.log();
    },
  },
});
const emits = defineEmits(['submitQuestion']);
const languageOptions = ref([]);
const editorContainerRef = ref();
const language = ref("");

watch(
    () => language.value,
    () => {
      monaco.editor.setModelLanguage(editor.getModel(), language.value.toLowerCase());
    }
);

const submit = () => {
  emits("submitQuestion", language.value);
}
let editor = {};
onMounted(async () => {
  editor = monaco.editor.create(editorContainerRef.value, {
    value: props.value,
    language: language.value,
    automaticLayout: true,
    theme: "vs-dark",
    fontSize: 18,
    placeholder: "// 在这里输入代码",
  });
  editor.onDidChangeModelContent(() => {
    props.handleChange(editor.getValue());
  });
  const res = await ProblemControllerService.listLanguage();
  if (res.code === 200) {
    languageOptions.value = res.data;
  } else {
    Message.error(res.msg);
  }
});
</script>
